<x-layouts.app>
    <div  style="background: url('/images/hanjiangdudiao.jpg') center no-repeat" class="min-h-[700px] flex w-full">
        <div class="flex flex-col p-4 items-center justify-end pt-6 w-full">
            <div class="flex items-center pl-2 py-1 pr-1 rounded-full bg-gray-200 max-w-3xl w-[60%]">
                <input type="text" class="flex-1 bg-gray-200 px-4 py-2 border-none focus:outline-none focus:border-transparent focus:ring-0 rounded-full" placeholder="搜索图书">
                <button class="bg-violet-500 text-white px-4 py-2 ml-2 hover:violet-blue-700 rounded-full w-[100px]">搜索</button>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-40 ball w-10 h-10 text-white">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
            </svg>
        </div>

    </div>
    <div class="flex flex-col">
            <div class="flex flex-col my-20 justify-center items-center">
                <div class="text-red-500 font-medium text-3xl">每个人都有自己的文明</div>
                <div class="text-gray-500">
                    <p>图书馆共计529套图书,你可以自由的浏览</p>
                </div>
            </div>
    </div>
    <div class="grid grid-cols-3 gap-4 px-3">
        <div class="flex flex-col shadow-xl rounded overflow-hidden transition-all hover:-translate-y-1">
            <div class="h-[240px] w-full">
                <image class="h-full w-full object-cover" src="/images/daohang.jpg"></image>
            </div>

            <div class="flex flex-col p-4">
                <div class="text-black font-bold text-[18px]">水经注</div>
                <div class="text-gray-500">水经注是一部中国古代地理学著作，是一部介绍中国各地水文地理的著作，共30卷，作者为北宋黄巢的弟子郦道元。</div>
            </div>
        </div>
    </div>

    <style>
        .ball {
            animation: bounceUpDown 2s ease-in-out infinite; /* 应用动画 */
        }
        @keyframes bounceUpDown {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
                opacity: 0;
            }
        }
    </style>
</x-layouts.app>
